<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米首页</title>
    <!-- 引入重置样式表 reset.css-->
    <link rel="stylesheet" href="css/reset.css">
    <!-- 引入字体图标样式iconfont.css -->
    <link rel="stylesheet" href="fonts/iconfont.css">
    <!-- 引入单位转换rem.js -->
    <script src="js/rem.js"></script>
    <!-- 引入首页样式表 index.css-->
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!-- 头部 -->
    <div id="header">
        <span class="iconfont icon-xinxi"></span>
        <input type="text" placeholder="&emsp;&emsp;最生活毛巾·Air">
        <span class="iconfont icon-saomiao"></span>
    </div>
    <!-- 主体部分 -->
    <div id="main">
        <!-- 导航 -->
        <div class="nav">
            <ul>
                <li><a href="#">推荐</a></li>
                <li><a href="#">感恩返场</a></li>
                <li><a href="#">手机</a></li>
                <li><a href="#">智能</a></li>
                <li><a href="#">电视</a></li>
                <li><a href="#">家电</a></li>
                <li><a href="#"><img src="img/2.jpg" alt=""></a></li>
            </ul>
        </div>
        <!-- 轮播 -->
        <div class="banner">
            <a href="#"><img src="img/4.jpg" alt=""></a>
        </div>
        <!-- 分类 -->
        <div class="classify">
            <div>
                <img src="img/5.jpg" alt="">
                <a href="#">新品发布</a>
            </div>
            <div>
                <img src="img/6.jpg" alt="">
                <a href="#">小米众筹</a>
            </div>
            <div>
                <img src="img/7.jpg" alt="">
                <a href="#">以旧换新</a>
            </div>
            <div>
                <img src="img/8.jpg" alt="">
                <a href="#">1分拼团</a>
            </div>
            <div>
                <img src="img/9.jpg" alt="">
                <a href="#">超值特卖</a>
            </div>
            <div>
                <img src="img/10.jpg" alt="">
                <a href="#">真心想要</a>
            </div>
            <div>
                <img src="img/11.jpg" alt="">
                <a href="#">每日臻选</a>
            </div>
            <div>
                <img src="img/12.jpg" alt="">
                <a href="#">电视热卖</a>
            </div>
            <div>
                <img src="img/13.jpg" alt="">
                <a href="#">家电热卖</a>
            </div>
            <div>
                <img src="img/14.jpg" alt="">
                <a href="#">米粉卡</a>
            </div>
        </div>
        <!-- 商城早报标题 -->
        <div class="earlyPaperTitle">
            <img src="img/15.jpg" alt="">
            <a href="#">史上第一章黑洞照片来了！（参与赢奖）</a>
        </div>
        <!-- 商城早报内容 -->
        <div class="earlyPaperContent">
            <div class="left">
                <a href="#"><img src="img/16.jpg" alt=""></a>
            </div>
            <div class="right">
                <a href="#"><img src="img/17.jpg" alt=""></a>
                <a href="#"><img src="img/18.jpg" alt=""></a>
            </div>
        </div>
        <!-- 小米众筹 -->
        <div class="crowdFunding">
            <h1>小米众筹</h1>
            <a href="#">更多&emsp;&emsp;</a>
        </div>
        <!-- 吸尘器 -->
        <div class="dustCatcher">
            <a href="#"><img src="img/19.jpg" alt=""></a>
            <P>米家手持无线吸尘器</P>
            <div></div>
            <div>
                <span>55731人支持</span>
                <span>974%</span>
            </div>
        </div>
    </div>
    <!-- 页脚导航 -->
    <div id="footer">
        <ul>
            <li>
                <a href="#">
                    <span class="iconfont icon-fangzi"></span>
                    <div>首页</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="iconfont icon-yemian"></span>
                    <div>分类</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="iconfont icon-zhinanzhen"></span>
                    <div>发现</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="iconfont icon-gouwuche"></span>
                    <div>购物车</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="iconfont icon-wode"></span>
                    <div>我的</div>
                </a>
            </li>
        </ul>
    </div>
</body>
</html>